import React from 'react';
import { Button } from 'antd-mobile';
import VirtualList from '../../compounts/virtual-list/VirtualList';
import { useNavigate } from 'react-router-dom';

function SearchTest() {
    const navigate = useNavigate();

    return (
        <div style={{ 
            padding: '20px', 
            textAlign: 'center',
            minHeight: '100vh',
            backgroundColor: '#f5f5f5'
        }}>
            <h2>搜索功能测试页面</h2>
            <p style={{ marginBottom: '20px', color: '#666' }}>
                点击下面的按钮测试搜索功能
            </p>
            
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <Button 
                    color='primary' 
                    size='large'
                    onClick={() => navigate('/search')}
                >
                    进入搜索页面
                </Button>
                
                <Button 
                    color='success' 
                    size='large'
                    onClick={() => navigate('/home')}
                >
                    返回首页
                </Button>
                
                <Button 
                    color='default' 
                    size='large'
                    onClick={() => navigate(-1)}
                >
                    返回上一页
                </Button>
            </div>
            
            <div style={{ 
                marginTop: '40px', 
                padding: '20px', 
                backgroundColor: '#fff',
                borderRadius: '8px',
                textAlign: 'left'
            }}>
                <h3>功能说明：</h3>
                <ul style={{ lineHeight: '1.8' }}>
                    <li>✅ 搜索页面已创建</li>
                    <li>✅ 搜索历史功能已实现</li>
                    <li>✅ 热门搜索标签已添加</li>
                    <li>✅ 模拟搜索结果已配置</li>
                    <li>✅ 路由配置已完成</li>
                    <li>✅ 首页搜索入口已添加</li>
                </ul>
            </div>

            {/* 虚拟列表示例 */}
            <div style={{ marginTop: '20px', background: '#fff', padding: '12px', borderRadius: '8px' }}>
                <h3 style={{ marginBottom: '8px' }}>虚拟列表示例（10000条）</h3>
                <VirtualList
                    height={300}
                    itemCount={10000}
                    rowHeight={44}
                    overscan={6}
                    onReachEnd={() => console.log('reach end')}
                    renderItem={({ index, style }) => (
                        <div style={{ ...style, display: 'flex', alignItems: 'center', padding: '0 12px', borderBottom: '1px solid #f5f5f5' }}>
                            第 {index + 1} 行
                        </div>
                    )}
                />
            </div>
        </div>
    );
}

export default SearchTest;



